iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
1
Modern Web

30天打造我的WebGIS系列 第 16

[Day 16] Leaflet.js: 設置基本地圖元件

  • 分享至 

  • xImage
  •  

前言

今天開始要逐步建立一個webGIS,練習一下使用Leaflet等API,在開始之前,先設定這個系統的目標功能:

  • 切換底圖
  • 定位
  • 量測
  • 資料查詢
  • 街景
  • 空間查詢
  • 結合統計圖表
  • 路徑規劃
  • 資料視覺化

今日工作

我們把工作分成幾天說明,今天預計會完成的部分屬於地圖基本款的設置,
包含了:

  • 版型及基本設置
  • 切換底圖
  • 定位
  • 量測

相關的程式碼都放在github,commit原則上會依照文章標示。

版型及基本設置

首先,版型很重要,為了方便起見,我們直接套用boostrap template,並模仿bootleaf這個專案設計了一套版型。

大概會是長這樣:

上方留一個Navigation Bar做為選單空間,此外,最重要的區塊,就是要有一個map的 div

<div id="container">
  <div id="map"></div>
  //預留其他上下左右panel,寬度及高度建議滿版
</div>

ps.關於排版詳情請參考原始碼..

接下來,我們在app.js加入:
map = L.map('map').setView([25.0375928, 121.5529563], 10);
在這邊提醒一下,leaflet預設使用的坐標系統是EPSG:4326,但tileLayers的WMTS標準大多是EPSG:3857,忘記或搞混的可以參考這一篇,另外,第二個值是指zoom layer。

底圖切換功能

加入底圖部分,在過去幾天我們也有使用了幾次,基本上是使用tileLayer這個類別,然而,webGIS通常會加入多種底圖,並且要有切換的功能。

因此,在此我們使用Leaflet.Basemaps套件:

ps.類似的功能也可以自行實作看看,使用layerGroup

Include the CSS:
<link rel="stylesheet" href="L.Control.Basemaps.css" />
Include the JavaScript:
<script src="L.Control.Basemaps-min.js"></script>

app.js:這邊用了兩個我覺得滿好看的底圖

var basemaps = [
  L.tileLayer('//{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    subdomains: 'abcd',
    maxZoom: 20,
    minZoom: 0,
    label: 'Toner Lite'  // optional label used for tooltip
  }),

  L.tileLayer('//{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    subdomains: 'abcd',
    maxZoom: 16,
    minZoom: 1,
    label: 'Watercolor'
  })
];

map.addControl(L.control.basemaps({
  basemaps: basemaps,
  tileX: 0,  // tile X coordinate
  tileY: 0,  // tile Y coordinate
  tileZ: 1   // tile zoom level
}));

定位功能

定位功能是webgis基本款,因為光有地圖,很多使用者會不知道自己在哪裡而迷了路,因此類似Google關鍵字地標搜尋,可以輸入關鍵字定位的功能,會是webGIS會出現的東西。

這類地標搜尋可以使用Google、Here、Mapbox,有些是免費(有request限制)以些是付費的,像這些POI供應平台申請access token後即可使用他們的API,在這邊我們使用的也是套件:Leaflet.geocoder

Include the CSS:
<link rel="stylesheet" href="~/dist/assets/css/Control.Geocoder.css" />

Include the JavaScript:
<script src="~/dist/assets/js/Control.Geocoder.js"></script>

app.js

var geocoder = L.Control.geocoder({
  defaultMarkGeocode: true
}).addTo(map);

量測功能

在圖上量測距離及面積,我們一樣直接使用模組,並把套件的文字稍微中文化。
Include the CSS:
<link rel="stylesheet" href="~/dist/assets/css/leaflet-measure.css" />

Include the JavaScript:
<script src="~/dist/assets/js/leaflet-measure.js"></script>

app.js

var measureControl = new L.Control.Measure({ measureControl: true, primaryLengthUnit: 'meters', secondaryLengthUnit: 'kilometers' });
measureControl.addTo(map);

後記

今天先將版型設置好及將地圖基本款功能放在地圖上,後續我們還有很多部分要實作,明天繼續加油!


上一篇
[Day 15] wms,wmts資源彙整與OSM
下一篇
[Day 17] Leaflet.js: 加入資料及資料互動
系列文
30天打造我的WebGIS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言